<template lang="html">
  <div class="backOrderBox">
    <el-row style="background:#F6F6F6; padding:5px;">
      <el-col :span="7" class="text-left">订单号</el-col>
      <el-col :span="6" class="text-left">退款流水号</el-col>
      <el-col :span="4" class="text-left">申请时间</el-col>
      <el-col :span="5" class="text-left">退款方式</el-col>
      <el-col :span="2" class="text-left">金额</el-col>
    </el-row>
    <el-row class="sucList1" style="padding:5px;">
      <el-col :span="7" class="text-left"><p>E20170620210831005123973</p></el-col>
      <el-col :span="6" class="text-left"><p>1706262004085071</p></el-col>
      <el-col :span="4" class="text-left">
        <p>2017-06-26</p>
        <p>20:04:08</p>
      </el-col>
      <el-col :span="5" class="text-left"><p>退款至微信钱包</p></el-col>
      <el-col :span="2" class="text-left"><p>59.80</p></el-col>
    </el-row>
    <div class="bzBox">
      <el-steps :center="true" :align-center="true" :active="2" finish-status="success">
        <el-step title="商家退款" description="2017-12-12 02:22:20">11</el-step>
        <el-step title="退款至微信"></el-step>
        <el-step title="确认到账"></el-step>
      </el-steps>
    </div>
    <el-row style="margin:10px 0;">
      <el-col :span="12" style="border-right:1px solid #EEEEEE;">
        <ul class="contentList1">
          <li>订单号：E201705141245122255</li>
          <li>产品类型：景区、预约、人工退款、预约后不可退换</li>
          <li>支付方式：微信安全支付 - 代销</li>
          <li>客户信息：余国普（135 0000 1234）</li>
        </ul>
      </el-col>
      <el-col :span="10" style="text-align:left; padding-left:10px;">
          <span style="font-size:12px; padding-top:5px;">订单状态：交易关闭</span><br>
          <span  style="font-size:12px;">标记退款：订单退款金额：59.80 元</span>
      </el-col>
    </el-row>

    <el-row style="background:#F6F6F6; padding:5px;">
      <el-col :span="12" class="text-left">产品名</el-col>
      <el-col :span="2" class="text-left">单价</el-col>
      <el-col :span="2" class="text-left">数量</el-col>
      <el-col :span="3" class="text-left">优惠(元)</el-col>
      <el-col :span="3" class="text-left">实付(元)</el-col>
      <el-col :span="2" class="text-left">状态</el-col>
    </el-row>
    <el-row class="sucList1">
      <el-col :span="12" class="text-left">
        <p style="width:90%;">【239元，乐山广场智选假日酒店+远成水世界亲子套餐】吃住玩一站搞定，美食玩水全网罗，周末出行好轻松！</p>
        <p class="gray" style="width:90%;">有效期:06月16日-06月24日（周五周六） 套餐内容:两大一小（住宿+早餐+水世界成人票2张） 房型:标准双人房</p>
      </el-col>
      <el-col :span="2" class="text-left">
        <p>48</p>
      </el-col>
      <el-col :span="2" class="text-left"><p>x1</p></el-col>
      <el-col :span="3" class="text-left"><p>-4.0</p></el-col>
      <el-col :span="3" class="text-left"><p>44.0</p></el-col>
      <el-col :span="2" class="text-left"><p>已下单</p></el-col>
    </el-row>
    <el-row class="sucList2">
        <el-col :span="12" class="text-left" >
          <span class="text-small">有赞备注</span>
        </el-col>
        <el-col :span="12" class="text-left" style="border-left:1px solid #eee;">
          <ul class="contentList2">
            <li>您的姓名：张金花</li>
            <li>手机号：18212345678</li>
          </ul>
        </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="Sass">
.backOrderBox{
  .bzBox{padding: 30px 20px 10px 20px; border: 1px solid #13CE66; background: #EFF7F3; border-radius: 5px;}
  .contentList1{list-style: none; padding: 5px 0;
    li{font-size: 12px; text-align: left;}
  }
  .contentList2{list-style: none; padding-left: 10px;
    li{ line-height: 22px; font-size: 12px;
      span{ font-size: 12px;}
      .date{display: inline; width: 120px;
        .el-input__inner{display: inline; width: 120px;}
      }
    }
  }
  .sucList1{ margin-top: 10px;
    p{font-size: 12px;}
  }
  .sucList2{ margin-top: 10px; border-top: 1px dashed #95989A; padding-top: 10px; position: relative;
    p{font-size: 12px;}
  }
  .el-step__main{margin-top: -60px;}
  .el-step__description{margin-top: 35px; width: 70px; text-align: center;}
}
</style>
